<template>
    <div class="app_container">
        <el-form :inline="true" :model="filter" size="small">
            <!-- <el-form-item label="状态">
                <el-select v-model="filter.status" placeholder="请选择" clearable style="width:150px;">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="正常" value="NORMAL"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="用户名">
                <el-input placeholder="用户名" v-model="filter.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input placeholder="手机号" v-model="filter.phone" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFilter">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column label="头像" width="110">
                <template slot-scope="scope">
                    <el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" fit="contain" style="width: 80px; height: 80px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="130"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="130"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
            <!-- <el-table-column prop="addtime" label="创建/更新时间" width="230">
                <template slot-scope="scope">
                    <div>创建时间：{{ scope.row.createTime }}</div>
                    <div>最近登录：{{ scope.row.loginTime }}</div>
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope">{{ scope.row.status == 'ENABLED' ? '正常' : '已禁用' }}</template>
            </el-table-column> -->
        </el-table>
        <br />

        <el-row type="flex" justify="center">
            <el-pagination background layout="prev, pager, next" :current-page="filter.pageNum" :page-size="filter.pageSize" :total="total" @current-change="changePage"></el-pagination>
        </el-row>
    </div>
</template>

<script>
import { apiGetUserList } from "@/api/user.js";
export default {
    name: 'user_index',
    data() {
        return {
            tableData: [],
            total: 0,
            filter: {
                pageNum: 1, pageSize: 16,
                username: '',
                phone: '',
                status: '',
            },
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiGetUserList(this.filter).then(res => {
                this.tableData = res.data;
                this.total = res.total;
                this.filter.pageNum = res.pageNum;
            });
        },
        changePage(page) {
            this.filter.pageNum = page
            this.getData()
        },
        onFilter() {
            this.filter.pageNum = 1
            this.getData()
        },

    },
}
</script>

<style></style>